Skip to main content

JS do this

frontend es6 Javascript

Javascript DO THIS not That

DO THISNOT THATComments
{React.Children.toArray(someData.map(item => <div> hello</div>))}someData.map(item=>(<div key={Math.random()}> hello </div>})manually assigning Keys on Children
const simon ={ age:32}; delete simon.ageconst {age, ...newSimon} = simondeleting from an object as this mutates the original object, instead generate a new one
const nums = [ null,2 ,4]; nums.filter(Boolean);This will remove all the nulls as null return false aka Falsey Bouncer
JSON.stringify(someObject, null,2)this will add some spacing when printing the object
const createUser = ({username, date}); createUser({username:'asd', date:'10-10-2000'}createUser('Simon', '01-01-2001')first one is more extendable and easier to read
const unique = [... new Set(numbers)]easy way to dedup
if (True) { debugger;}force browser to stop
someFunction && someFunction();someFunction?.();conditional execution
const isRequired = () =>{ throw Error('Arguement is required');}const userName = (username = isRequired())=> {}forces parameters, null is considered a valid value
console.trace or console.table or console.log('%c test', 'color:red;');console.logformatted logging
class Foo {} export {Foo}; import {Foo} from './Foo'export default Foo;shy away from default export
async function doSomething(){}; doSomethingAsync();(async function doSomething(){})();avoid anonymous invokation IIFE
const element = document.getElementById('id'); element.scrollIntoView({behavior: "smmoth"});scroll smoothly into view
scripts: { "preinstall": "", "postinstall" : ""}this will run before running and post run so you dont need to execute commands manually
Object.entries(someObj).forEach([key,value]) =>{ console.log(key,value)}iterate over both key and value
let price =0; const defaultPrice = price_1 ?? 10; console.log(defaultPrice); //0`let price =0; const defaultPrice = price_110; console.log(defaultPrice); //10`0 in JS is falsey but that might not be what we want in the behavior, using ?? (nullish coalescing will only return falsey if null or undefined)
const fs = require("fs/promises"); await fs.writeFile; ...const fs = require("fs")import node fs promise rather than just fs, most modules has promisified versions ie: module/promises
commonJS:require module.exports ES6: import exportrequire vs import. import are more customizable when importing. import can by async. require is only sync
  • Deconstructing
  • Spreading
  • Interpolation
  • Async Wait